<template>
  <div class="index column">
    <PageHeader :content="pageTitle"></PageHeader>
    <div>
      <el-button type="primary" @click="add()">编辑</el-button>
    </div>
    <div class="container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          v-for="(item, index) in roleData[0].children"
          :key="index"
          :title="item.userName"
          :name="item.userId"
        >
          <div class="row-wrap">
            <el-card
              class="box-card"
              v-for="(item, index1) in item.children"
              :key="index1"
            >
              <div class="item">
                <el-descriptions column="2" title="用户信息">
                  <el-descriptions-item label="用户名">{{
                    item.userName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="手机号">{{
                    item.tel
                  }}</el-descriptions-item>
                  <el-descriptions-item label="密码">{{
                    item.password
                  }}</el-descriptions-item>
                  <el-descriptions-item label="学校">
                    {{ item.schoolName }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/user";
import PageHeader from "@/components/user/PageHeader";
export default {
  name: "role",
  components: {
    PageHeader,
  },
  data() {
    return {
      pageTitle: "用户管理",
      isBack: false,
      activeName: "1",
      roleData: [
        {
          user_id: 0,
          userName: "所有用户",
          children: [
            {
              user_id: 1,
              userName: "超级管理员",
              children: [],
            },
            {
              user_id: 2,
              userName: "校级管理员",
              children: [],
            },
            {
              user_id: 3,
              userName: "院级管理员",
              children: [],
            },
            {
              user_id: 4,
              userName: "学生",
              children: [],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getAllUser();
  },
  methods: {
    getAllUser() {
      userApi.getAllUser().then((res) => {
        var data = res.data.data;
        // console.log("用户数据：", data);
        data.map((user) => {
          var index = parseInt(user.role) - 1;
          this.roleData[0].children[index].children.push(user);
        });
      });
    },
    add() {
      this.$router.push({ path: "/userCenter/role_edit" });
    },
  },
};
</script>

<style scoped>
.index {
  width: 1000px;
  box-sizing: border-box;
  padding: 35px 0 0 0;
}
.container {
  margin-top: 35px;
}

.back:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #dcdfe6;
}

.box-card {
  width: 480px;
  margin: 0 16px 15px 0;
}
.item {
  padding: 18px 0;
}
</style>